<template>
  <div class="box">
    <!-- 拖拽有transition过渡效果 -->
    <h3>
      <button>恢复到原来的顺序</button>
    </h3>
    <div class="list-group">
      <h3>Transition</h3>
      <draggable 
        :list="list"
        :group="{name: 'people', pull: true, put: false}"
        tag="ul"
        v-bind="dragOptions"
      >
        <transition-group type="transition" name="flip-list">
          <li
            class="list-group-item"
            v-for="element in list"
            :key="element.name"
          >
            <span> {{ element.name }}</span>
          </li>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
const message = [
  "vue.draggable",
  "draggable",
  "component",
  "for",
  "vue.js 2.0",
  "based",
  "on",
  "Sortablejs"
];
export default {
  name: 'dragable',
  components: {
    draggable
  },
  data () {
    return {
      list: message.map((name, index) => {
        return {
          name,
          id: index + 1,
        }
      }),
    }
  },
  computed: {
    dragOptions() {
      return {
        // 把animation改成200，就是另一种过渡效果
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: "ghost"
      }
    }
  },
  props: {
  },
  watch: {
  },
  created () {
  },
  mounted () { },
  methods: {
  }
}
</script>
<style scoped lang='less'>
.box {
  display: flex;
  width: 300px;
}
.list-group:first-child {
  margin-right: 20px;
}
.list-group-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .125);
  text-align: left;
  list-style: none;
  span {
    margin-left: 20px;
  }
  input {
    margin-left: 20px;
  }
}
// 这两句样式是关键--注意这个flip-list要和上面的name对应好
.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}


.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>
